<template>
   <div style="position: fixed; z-index: 9999;width: 100%;">
      <el-container class="container">
         <el-aside class="lay-center">
            <el-icon color="#fff">
               <View />
            </el-icon>
            <div style="margin-left: 10px; " class="text-color">
               QZB项目练习
            </div>
         </el-aside>
         <el-main class="lay-center-two">
            <div>
               <el-tooltip class="box-item" effect="light" content="折叠" placement="bottom">
                  <el-icon color="#fff" class="pointer" @click="userStore.handleMenuWidth()">
                     <Fold v-if="userStore.asideWidth === '250px'" />
                     <Expand v-else />
                  </el-icon>
               </el-tooltip>
               <el-tooltip class="box-item" effect="light" content="刷新" placement="bottom">
                  <el-icon color="#fff" class="pointer" style="margin-left: 20px;" @click="handleRefesh()">
                     <Refresh />
                  </el-icon>
               </el-tooltip>
            </div>
            <div class="lay-center lay-right">
               <el-tooltip class="box-item" effect="light" content="视频" placement="bottom">
                  <el-icon color="#fff" class="pointer">
                     <VideoCamera />
                  </el-icon>
               </el-tooltip>
               <el-tooltip class="box-item" effect="light" content="全屏" placement="bottom" v-if="isFull === true">
                  <el-icon color="#fff" class="pointer" @click="handleFullScreen">
                     <FullScreen />
                  </el-icon>
               </el-tooltip>
               <el-tooltip class="box-item" effect="light" content="全屏" placement="bottom" v-else="isFull === false">
                  <el-icon color="#fff" class="pointer" @click="handleFullScreen">
                     <Aim />
                  </el-icon>
               </el-tooltip>

               <div class="lay-center">
                  <el-avatar :size="30" :src="circleUrl" />
                  <el-dropdown @command="handleCommand" trigger="click" class="pointer">
                     <div class="el-dropdown-link lay-center">
                        <span class="text-color" style="margin-left: 10px;">{{ userStore.userInfo.username }}</span>
                        <el-icon class="el-icon--right"><arrow-down color="#fff" /></el-icon>
                     </div>
                     <template #dropdown>
                        <el-dropdown-menu>
                           <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                           <el-dropdown-item command="handleLogout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                     </template>
                  </el-dropdown>
               </div>
            </div>

         </el-main>
      </el-container>
      <change-password ref="drawerModal" title="修改密码" @submit="handleSubmit(formRef)" @clearForm="handleClear">
         <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item label="旧密码" prop="oldpassword" :label-width="formLabelWidth">
               <el-input v-model="form.oldpassword" show-password autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="password" :label-width="formLabelWidth">
               <el-input v-model="form.password" show-password autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword" :label-width="formLabelWidth">
               <el-input v-model="form.repassword" show-password autocomplete="off" />
            </el-form-item>
         </el-form>
      </change-password>

   </div>

</template>
<script setup>
import { ref } from 'vue';
import { useInfoStore } from '../../store';
import { useFullscreen } from '@vueuse/core'
import { useRepassword, useLogout } from '../../composables/useManager';
import changePassword from '@/components/change-password.vue'

const userStore = useInfoStore();
const circleUrl = userStore.userInfo.avatar;
const { isFullscreen, toggle } = useFullscreen();
const isFull = ref(true);
const {
   drawerModal,
   formRef,
   form,
   rules,
   formLabelWidth,
   handleSubmit,
   handleClear
} = useRepassword();

const {
   handleLogout
} = useLogout();

/** 下拉选择 */
const handleCommand = (one) => {
   // 这里最好要用switch case 进行判断
   switch (one) {
      case 'rePassword':
         console.log('one');
         drawerModal.value.openModal();
         console.log('two');

         break;
      case 'handleLogout':
         handleLogout();
         break;
      default:
         break;
   }
}
/** 刷新页面 */
const handleRefesh = () => {
   window.location.reload();
}
/** 全屏 */
const handleFullScreen = () => {
   console.log('是否为全屏', isFullscreen.value);
   isFull.value = isFullscreen.value;
   toggle();
}




</script>
<style lang='scss' scoped>
.container {
   background-color: #606ff6;
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
   height: 64px;
   width: 100% !important;
}

@media (min-width: 1536px) {
   .container {
      max-width: 100%;
   }
}

@media (min-width: 1024px) {
   .container {
      max-width: 100%;
   }
}

@media (min-width: 640px) {
   .container {
      max-width: 100%;
   }
}

.el-main {
   padding: 0px;
   box-sizing: border-box;
}

.lay-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

.lay-center-two {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.text-color {
   color: #fff;
}

.lay-right {
   width: 260px;
   display: flex;
   justify-content: space-around;
}

.pointer {
   cursor: pointer;
}
</style>
